<script setup>
import {NSplit} from "naive-ui";
import UrlTable from "../components/UrlTable.vue";
import RequestView from "../components/RequestView.vue";
import ResponseView from "../components/ResponseView.vue";
import HeadBar from "../components/HeadBar.vue";
import CollectionView from '../components/CollectionView.vue'
</script>

<template>
  <n-split direction="vertical" default-size="10" disabled>
    <template #1>
      <head-bar/>
    </template>
    <template #2>
      <n-split direction="horizontal" default-size="260px" max="500px" min="100px">
        <template #1>
          <CollectionView />
        </template>
        <template #2>
          <n-split direction="vertical" :default="0.5" :max="0.8" :min="0.2" pane1-style="overflow:auto">
            <template #1>
              <url-table/>
            </template>
            <template #2>
              <n-split direction="horizontal" :default="0.5" :max="0.8" :min="0.2">
                <template #1>
                  <request-view/>
                </template>
                <template #2>
                  <response-view/>
                </template>
              </n-split>
            </template>
          </n-split>
        </template>
      </n-split>
    </template>
  </n-split>
</template>

<style scoped>

</style>